<template>
	<view class="container">
		<!-- shop picture -->
		<view class="tui-picture-box">
			<view class="tui-picture-swiper">
				<swiper class="swiper" :autoplay="true" :interval="5000" :duration="150" :circular="true" @change="pictureChange">
					<block v-for="(item, index) in banner" :key="index">
						<swiper-item :data-index="index" @tap.stop="previewImage" class="tui-picture-item">
							<image :src="item" class="tui-slide-image" mode="scaleToFill" />
						</swiper-item>
					</block>
				</swiper>
				<tui-swiper-dot :type="1" width="20px" height="6px" radius="10px" bottom="80rpx" :count="count"
					:current="current" />
			</view>
		</view>
		<!-- shop picture -->
		<!-- shop content -->
		<view class="tui-content-box">
			<view class="tui-basic">
				<view class="tui-shop-title">
					五四广场我的来啊老考拉人的小面
				</view>
				<view class="tui-style">
					<view class="tui-rate">
						<tui-rate :size="15" :current="5" />
					</view>
					<view class="tui-min-order">
						2024年1月开业
					</view>
					<view class="tui-min-order">
						24小时营业
					</view>
				</view>
				<view class="tui-feature">
					<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">停车场</tui-tag>
					<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">会议室</tui-tag>
					<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">有投影</tui-tag>
					<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">白板</tui-tag>
				</view>
				<view class="tui-address-box">
				<view class="tui-address">青岛市 | 崂山区小密码将的是人人名字的我的小</view>
			</view>
			</view>
			<view class="tui-button-box">
				<view>
					<tui-icon name="voipphone" color="#000" :size="26"></tui-icon>
				</view>
				<view>
					<tui-icon name="position" color="#000" :size="26"></tui-icon>
				</view>
			</view>
		</view>
		<!-- shop content -->
		<view class="tui-vip-box">
			预定专享：乌龙茶1泡、精美茶点4种
		</view>
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item, index) in productList" :key="index">
					<!--商品列表-->
					<view class="tui-goods-item">
						<image :src="'/static/images/mall/product/'+(index%2==0?'1.jpg':'4.jpg')"
							class="tui-goods-img" />
						<view class="tui-goods-info">
							<view class="tui-goods-title">
								{{index%2==0?"欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜彩粉嫩透亮修颜霜透亮修颜霜透亮修颜霜":"百雀羚套装女补水保湿护肤品"}}
							</view>
							<view class="tui-goods-model">
								<view class="tui-model-text">{{index%2==0?"440ml;10件;套装":"500ml;2支"}}</view>
								<tui-icon name="arrowdown" :size="16" color="#333"></tui-icon>
							</view>
							<view class="tui-price-box">
								<view class="tui-goods-price">￥4444</view>
								<tui-numberbox :value="item.buyNum" :height="36" :width="64" :min="1" :index="index"
									@change="changeNum"></tui-numberbox>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [
					'https://www.thorui.cn/img/product/11.jpg',
					'https://www.thorui.cn/img/product/2.png',
					'https://www.thorui.cn/img/product/33.jpg',
					'https://www.thorui.cn/img/product/4.png',
					'https://www.thorui.cn/img/product/55.jpg',
					'https://www.thorui.cn/img/product/6.png',
					'https://www.thorui.cn/img/product/7.jpg',
					'https://www.thorui.cn/img/product/8.jpg'
				],
				current: 0,
				count: 0,
				productList: [{
						img: 1,
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 2,
						name: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 3,
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 4,
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					},
					{
						img: 5,
						name: '百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 6,
						name: '短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 1,
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 2,
						name: '德国DMK进口牛奶',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 3,
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 4,
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					}
				],
				
			}
		},
		methods: {
			pictureChange: function(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
	.tui-picture-box {
		position: relative;
		padding-bottom: 30rpx;
		background-color: #fff;
	}
	.tui-picture-swiper {
		position: relative;
		height: 240px;
	}
	.tui-slide-image {
		width: 100%;
		display: block;
		border-radius: 20rpx;
	}
	swiper{
		height: 240px;
		overflow: hidden;
	}
	.tui-picture-item{
		padding: 0 15rpx;
		box-sizing: border-box;	
	}
	.tui-content-box{
		background-color: #fff;
		padding: 0 15rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.tui-basic{
		
	}
	.tui-style{
		margin-top: 15rpx;
		display: flex;
		align-items: center;
	}
	.tui-min-order{
		padding-left: 15rpx;
		font-size: 28rpx;
		color: #999;
	}
	.tui-feature{
		margin-top: 15rpx;
		display: flex;
	}
	.tui-address-box{
		display: flex;
		justify-content: space-between;
	}
	.tui-address {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 15rpx;
		margin-right: 20rpx;
	}
	.tui-button-box {
		display: flex;
		flex-direction: column;
		align-items: baseline;
		justify-content: space-evenly;
		font-size: 40rpx;
		flex:0 0 auto;
		line-height: 40rpx;
		padding-left: 30rpx;
		padding-right: 20rpx;
	}
	.tui-vip-box{
		margin-top: 15rpx;
		padding:20rpx 15rpx;
		background-color: #fff;
		font-size: 24rpx;
	}
	
	.tui-goods-item {
		background-color: #fff;
		display: flex;
		padding: 0 15rpx;
		box-sizing: border-box;
	}
	
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
	
	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #333;
	}
	
	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}
	
</style>